<!DOCTYPE html>
<html>
<head>
    <title>我的收藏</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(function () {
            /*获取当前登陆用户信息*/
            var user = JSON.parse(sessionStorage.getItem("user"));
            /*获取用户id*/
            var id = user.id;
            //根据id查询登陆用户信息
            $.get("/users/"+id, function (data) {
                $(".name").html(data.nickName);
                /*渲染用户信息界面*/
                $(".info").renderValues(data);
                $("#pills-tab").renderValues(data);
                $(".bg").css("background-image", "url(" + data.coverImgUrl + ")");
            });

            //=======游记===========================================================================================
            var travelCurrentPage = 1;
            var travelPages;
            var travels;
            /*查询当前用户已收藏的游记*/
            $.get("/users/"+id+"/collect/travels",{userId: id,type: 3}, function (data) {
                console.log(data);
                travelPages = data.pages;
                travels = data.list;
                renderViews($("#travels"), {list: travels}, "/travelContent.html?id=")
            });

            //=======攻略===========================================================================================
            var strategyCurrentPage = 1;
            var strategyPages;
            var strategis;
            /*查询当前用户已收藏的攻略*/
            console.log(id);
            $.get("/users/"+id+"/collect/strategies",{userId: id,type: 2},  function (data) {
                strategyPages = data.pages;
                strategis = data.list;
                renderViews($("#strategies"), {list: strategis}, "/strategyCatalogs.html?strategyId=")
            });

            //=======日报===========================================================================================
            var newsCurrentPage = 1;
            var newsPages;
            var news;
            //查询当前用户已收藏的日报
            //日报的已收藏状态是state=1
            $.get("/users/"+id+"/collect/news",{userId: id,type: 1}, function (data) {
                console.log(data);
                newsPages = data.pages;
                news = data.list;
                renderViews($("#news"), {list: news}, "/newsContent.html?id=")
            });

            /*滑动屏幕*/
            $(window).scroll(function () {
                /*判断是否到底*/
                if (isEnd()) {
                    /*如果是游记选项卡*/
                    if ($("#travels").hasClass("active")) {
                        if (travelCurrentPage < travelPages) {
                            travelCurrentPage++;
                            $.get("/users/"+id+"/collect/travels", {userId: id,type: 3, currentPage: travelCurrentPage}, function (data) {
                                travels = $.merge(travels, data.list);
                                renderViews($("#travels"), {list: travels}, "/travelContent.html?id=")
                            });
                        } else {
                            $(document).dialog({
                                type: "notice",
                                infoText: "没有更多了",
                                autoClose: 1000,
                                position: "center"
                            });
                        }
                    }
                    //如果是攻略选项卡================================================================================
                    else if ($("#strategies").hasClass("show")) {
                        if (strategyCurrentPage < strategyPages) {
                            strategyCurrentPage++;
                            $.get("/users/" + id + "/collect/strategies", {userId: id,type: 2, currentPage: strategyCurrentPage}, function (data) {
                                strategis = $.merge(strategis, data.list);
                                renderViews($("#strategies"), {list: strategis}, "/strategyCatalogs.html?strategyId=")
                            });
                        } else {
                            $(document).dialog({
                                type: "notice",
                                infoText: "没有更多了",
                                autoClose: 1000,
                                position: "center"
                            });
                        }
                    }
                    //如果是日报选项卡================================================================================
                    else if ($("#news").hasClass("show")) {
                        if (newsCurrentPage < newsPages) {
                            newsCurrentPage++;
                            //日报的已收藏状态是state=1
                            $.get("/users/" + id + "/collect/news", {userId: id,type: 1, currentPage: newsCurrentPage}, function (data) {
                                news = $.merge(news, data.list);
                                renderViews($("#news"), {list: news}, "/newsContent.html?id=")
                            });
                        } else {
                            $(document).dialog({
                                type: "notice",
                                infoText: "没有更多了",
                                autoClose: 1000,
                                position: "center"
                            });
                        }
                    }
                }
            });

            /*渲染界面*/
            function renderViews(ele, data, html) {
                ele.renderValues(data, {
                    handle: function (ele, value) {
                        ele.href = html + value;
                    }
                });
            }
        })
    </script>

</head>

<body>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item ">
            <a class="nav-link " id="travels-tab" data-toggle="pill" href="#travels">
                游记收藏<span></span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#strategies">
                攻略收藏<span></span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#news">
                日报收藏<span></span>
            </a>
        </li>
    </ul>


    <div class="container tab-content" id="pills-tabContent">

        <div class="tab-pane fade show active" id="travels">
            <dl class="list" render-loop="list">
                <dd>
                    <a render-key="list.collectId" render-fun="handle">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="tab-pane fade " id="strategies">
            <dl class="list" render-loop="list">
                <dd>
                    <a href="#" render-key="list.collectId" render-fun="handle">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                        </p>
                    </a>
                </dd>
            </dl>
        </div>

        <div class="tab-pane fade" id="news">
            <dl class="list" render-loop="list">
                <dd>
                    <a render-key="list.collectId" render-fun="handle">
                        <img render-src="list.coverUrl">
                        <p>
                            <span class="title" render-html="list.title"></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

    </div>
</div>

</body>

</html>
